<template>
	<view class="container">
		<view class="box-bg" style="width: 100%;">
				<uni-nav-bar backgroundColor="#f5f5f5" shadow left-icon="left" :border='false' :shadow='false' @clickLeft="goBack" />
			</view>
		<view class="login-title">验证码登录</view>
		<view class="login-subtitle">未注册的手机号验证后自动完成注册</view>
		<view class="phoneItem">
			<uni-easyinput :inputBorder="false" placeholder="请输入手机号"></uni-easyinput>
		</view>
		<view class="form-item">
			<uni-easyinput :inputBorder="false" placeholder="请输入验证码"></uni-easyinput>
			<button class="codeBtn">获取验证码</button>
		</view>
		<button class="loginBtn" @click="goHome">登录</button>
		<view class="other-login">
			<view>
				<view>其他登录方式</view>
				<view class="anotherLogin">
					<i class="iconfont suoding" @click="goPwd"></i>
					<i class="iconfont weixin1" @click="goWeixin"></i>
				</view>
			</view>

		</view>
		<view class="agreement">
			<checkbox />
			<p>我已阅读并同意<span>《服务协议》</span>和<span>《个人信息保护指引》</span></p>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	function goPwd() {
		uni.navigateTo({
			url:"/pagesA/login/pwd"
		})
	}

	function goWeixin() {
		uni.navigateTo({
			url:"/pagesA/login/weixin"
		})
	}

	function goHome() {
		uni.navigateTo({
			url:"/pages/index/index"
		})
	}
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style scoped>
	@import '@/static/icon.css';

	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	.container {
		/* padding: 15px; */
		width: 100vw;
		height: 100vh;
	}

	.login-title {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.login-subtitle {
		font-size: 14px;
		color: #888;
		margin-bottom: 20px;
	}

	.form-item,
	.phoneItem {
		margin-bottom: 10%;
		border-bottom: 1px solid #eee;
	}

	.form-item {
		display: flex;
	}

	.uni-easyinput {
		width: 100%;
		height: 100rpx;

	}

	.codeBtn {
		height: 35px;
		background-color: white;
		font-size: 30rpx;
		padding: 3px;
	}

	.loginBtn {
		width: 100%;
		background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
		color: #fff;
		border: none;
		border-radius: 10px;
		margin-top: 20px;
	}

	.other-login {
		text-align: center;
		margin-top: 20px;
		height: 100px;
		margin-top: 180px;
	}

	.login-method {
		display: flex;
		justify-content: space-around;
		margin-top: 10px;
	}

	.method-btn {
		padding: 10px;
		background-color: #fff;
		color: #007aff;
		border: 1px solid #007aff;
		border-radius: 5px;
	}

	.agreement {
		display: flex;
		align-items: center;
	}

	.agreement span {
		color: #007aff;
	}

	.iconfont {
		padding: 10px;
		border-radius: 50%;
		color: white;
		margin-left: 15px;
	}

	.suoding {
		background: #7675FD;
	}

	.weixin1 {
		background: #3ED280;
	}

	.anotherLogin {
		margin-left: 10%;
		width: 80%;
		height: 50px;
		margin-top: 15px;
	}
</style>